console.info('contentScript is running')

import { createApp } from 'vue'
import App from './Content.vue'

let mountEl = document.createElement("div");
mountEl.setAttribute("id", 'kkapp');
if(document.querySelector('body')){
  document.body.appendChild(mountEl);
}else if(document.querySelector('html')){
  document.querySelector('html').appendChild(mountEl);
}

createApp(App).mount('#kkapp')


function makeElementDraggable(elementId) {
  const element = document.getElementById(elementId);
  let isDragging = false;
  let offsetX, offsetY;
  let isMouseDown = false;

  // 监听鼠标按下事件
  element.addEventListener('mousedown', (e) => {
      isMouseDown = true;
      isDragging = false; // 初始状态不是拖动
      // 获取鼠标点击时，元素的相对位置
      offsetX = e.clientX - element.getBoundingClientRect().left;
      offsetY = e.clientY - element.getBoundingClientRect().top;

      // 禁止文本选中等其他操作
      e.preventDefault();
  });

  // 监听鼠标移动事件
  document.addEventListener('mousemove', (e) => {
      if (isMouseDown) {
          isDragging = true; // 开始拖动
          // 计算元素的新位置
          const x = e.clientX - offsetX;
          const y = e.clientY - offsetY;

          // 设置元素的新位置
          element.style.left = x + 'px';
          element.style.top = y + 'px';
      }
  });

  // 监听鼠标松开事件
  document.addEventListener('mouseup', (e) => {
      if (isDragging) {
          // 如果发生了拖动，则不触发点击事件
          isMouseDown = false;
          isDragging = false;
          return; // 阻止触发点击事件
      }

      // 如果没有拖动，正常触发点击事件
      if (isMouseDown) {
          console.log('Element clicked!');
          // 你可以在这里处理点击事件的逻辑
      }

      isMouseDown = false; // 重置鼠标状态
  });

  // 监听元素的点击事件，避免拖动时触发
  element.addEventListener('click', (e) => {
      if (isDragging) {
          // 如果正在拖动，阻止点击事件
          e.stopImmediatePropagation();
      }
  });
}
makeElementDraggable('kk-main-icon');
